<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
  <meta charset="UTF-8">
  <title>Converting a TextMate Theme</title>
  <link data-turbolinks-track="true" href="../../assets/application-b86a2086c99917c6bf2a9d74b4038381.css" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="../../assets/application-c3106c6fe52ccec6f26495730a478cca.js"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="yzXUiWH6GiCHbvbJOg7usjzA7LawyxwB+oJHEcWTOIM=" name="csrf-token" />
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-3769691-35', 'atom.io');
  ga('send', 'pageview');

</script>

  <meta property="og:url" content="https://atom.io/" />
<meta property="og:site_name" content="Atom" />
<meta property="og:title" content="A hackable text editor for the 21st Century" />
<meta property="og:description" content="At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it." />
<meta property="og:type" content="website" />
<meta property="og:author" content='https://www.facebook.com/GitHub' />
<meta property="og:image" content="http://og.github.com/atom-logo/atom-logo@1200x1200.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />
<meta property="og:image" content="http://og.github.com/atom-mark/atom-mark@1200x630.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

  <meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@AtomEditor" />
<meta property="twitter:creator" content='@github' />
<meta property="twitter:title" content="Atom" />
<meta property="twitter:description" content="A hackable text editor for the 21st Century" />
<meta property="twitter:image:src" content="http://og.github.com/atom-logo/atom-logo@1200x630.png" />
<meta property="twitter:image:width" content="1200" />
<meta property="twitter:image:height" content="630" />

  <link rel="shortcut icon" href="../../favicon.ico"/>
</head>
<body>

  <div class="footer-push">
    
    

    <header class="header">
  <div class="wrapper">
    <h1 title="Atom">
      <a href="../../index.html" class="logo"></a>
    </h1>

    <ul class="navigation">
      <li><a class="" href="../../packages.html">Packages</a></li>
      <li><a class="is-selected" href="../latest/index.html">Documentation</a></li>
      <li><a href="http://blog.atom.io">Blog</a></li>
      <li><a href="../../faq.html">FAQ</a></li>
      <li><a class="" href="http://atom.io/contact">Contact</a></li>
    </ul>
  </div>
</header>


    <div class="wrapper documents content-push">
  <div class="columns">
    <div class="column main-column markdown">
        <h2>
<a name="converting-a-textmate-theme" href="converting-a-text-mate-theme.html#converting-a-textmate-theme"></a>Converting a TextMate Theme</h2>

<p>This guide will show you how to convert a <a href="http://macromates.com">TextMate</a> theme to an Atom
theme.</p>

<h3>
<a name="differences" href="converting-a-text-mate-theme.html#differences"></a>Differences</h3>

<p>TextMate themes use <a href="http://en.wikipedia.org/wiki/Property_list">plist</a> files while Atom themes use <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a> or
<a href="http://lesscss.org">LESS</a> to style the UI and syntax in the editor.</p>

<p>The utility that converts the theme first parses the theme's plist file and
then creates comparable CSS rules and properties that will style Atom similarly.</p>

<h3>
<a name="install-apm" href="converting-a-text-mate-theme.html#install-apm"></a>Install apm</h3>

<p>The <code>apm</code> command line utility that ships with Atom supports converting
a TextMate theme to an Atom theme.</p>

<p>Check that you have <code>apm</code> installed by running the following command in your
terminal:</p>

<pre lang="sh"><code>apm help init
</code></pre>

<p>You should see a message print out with details about the <code>apm init</code> command.</p>

<p>If you do not, launch Atom and run the <em>Atom &gt; Install Shell Commmands</em> menu
to install the <code>apm</code> and <code>atom</code> commands.</p>

<p>You can now run <code>apm help init</code> to see all the options for initializing new
packages and themes.</p>

<h3>
<a name="convert-the-theme" href="converting-a-text-mate-theme.html#convert-the-theme"></a>Convert the Theme</h3>

<p>Download the theme you wish to convert, you can browse existing TextMate themes
<a href="http://wiki.macromates.com/Themes/UserSubmittedThemes">here</a>.</p>

<p>Now, let's say you've downloaded the theme to <code>~/Downloads/MyTheme.tmTheme</code>,
you can convert the theme with the following command:</p>

<pre lang="sh"><code>apm init --theme ~/.atom/packages/my-theme --convert ~/Downloads/MyTheme.tmTheme
</code></pre>

<p>You can browse to <code>~/.atom/packages/my-theme</code> to see the converted theme.</p>

<h3>
<a name="activate-the-theme" href="converting-a-text-mate-theme.html#activate-the-theme"></a>Activate the Theme</h3>

<p>Now that your theme is installed to <code>~/.atom/packages</code> you can enable it
by launching Atom and selecting the <em>Atom &gt; Preferences...</em> menu.</p>

<p>Select the <em>Themes</em> link on the left side and choose <em>My Theme</em> from the
<strong>Syntax Theme</strong> dropdown menu to enable your new theme.</p>

<p><img title=":tada:" alt=":tada:" src="https://a248.e.akamai.net/assets.github.com/images/icons/emoji/tada.png" height="20" width="20" align="absmiddle"> Your theme is now enabled, open an editor to see it in action!</p>

<h3>
<a name="further-reading" href="converting-a-text-mate-theme.html#further-reading"></a>Further Reading</h3>

<ul>
<li>Check out <a href="publishing-a-package.html">Publishing a Package</a> for more information
on publishing the theme you just created to <a href="../../index.html">atom.io</a>.</li>
</ul>
    </div>
    <div class="column sidebar documents-toc">
      <select class="js-doc-version-switcher version-switcher">
  <option value="v0.69.0">v0.69.0</option>
<option value="v0.68.0">v0.68.0</option>
<option value="v0.67.0">v0.67.0</option>
<option value="v0.66.0">v0.66.0</option>
<option value="v0.65.0">v0.65.0</option>
<option value="v0.64.0">v0.64.0</option>
<option value="v0.63.0">v0.63.0</option>
<option value="v0.62.0">v0.62.0</option>
<option value="v0.61.0">v0.61.0</option>
<option selected="selected" value="v0.60.0">v0.60.0</option>
<option value="v0.59.0">v0.59.0</option>
<option value="v0.58.0">v0.58.0</option>
<option value="v0.57.0">v0.57.0</option>
<option value="v0.56.0">v0.56.0</option>
<option value="v0.55.0">v0.55.0</option>
<option value="v0.54.0">v0.54.0</option>
<option value="v0.53.0">v0.53.0</option>
<option value="v0.51.0">v0.51.0</option>
<option value="v0.50.0">v0.50.0</option>
<option value="v0.49.0">v0.49.0</option>
<option value="v0.48.0">v0.48.0</option>
<option value="v0.47.0">v0.47.0</option>
<option value="v0.46.0">v0.46.0</option>
<option value="v0.45.0">v0.45.0</option>
<option value="v0.44.0">v0.44.0</option>
<option value="v0.41.0">v0.41.0</option>
<option value="v0.40.0">v0.40.0</option>
<option value="0.52.0">0.52.0</option>
</select>


      <ul class="navigation">
        <li><a href="" class="is-selected">Documentation</a></li>
        <li><a href="../api/v0.60.0/api/index.html">API</a></li>
      </ul>

      <hr />

      <form accept-charset="UTF-8" action="/docs/v0.60.0/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
        <input class="sidebar-search-field" id="q" name="q" placeholder="Search documentation" type="text" value="" />
</form>
      <h2>
<a name="guides" href="converting-a-text-mate-theme.html#guides"></a>Guides</h2>

<ul>
<li><a href="getting-started.html">Getting Started</a></li>
<li><a href="customizing-atom.html">Customizing Atom</a></li>
<li><a href="creating-a-package.html">Creating a Package</a></li>
<li><a href="creating-a-theme.html">Creating a Theme</a></li>
<li><a href="publishing-a-package.html">Publishing a Package</a></li>
<li><a href="converting-a-text-mate-bundle.html">Converting a TextMate Bundle</a></li>
<li><a href="converting-a-text-mate-theme.html">Converting a TextMate Theme</a></li>
<li><a href="contributing.html">Contributing</a></li>
</ul><h3>
<a name="advanced-topics" href="converting-a-text-mate-theme.html#advanced-topics"></a>Advanced Topics</h3>

<ul>
<li><a href="advanced/configuration.html">Configuration</a></li>
<li><a href="advanced/keymaps.html">Keymaps</a></li>
<li><a href="advanced/serialization.html">Serialization</a></li>
<li><a href="advanced/view-system.html">View System</a></li>
</ul>
    </div>
  </div>
</div>


    <div class="footer-pad"></div>
  </div>

  <footer>
  <div class="footer">
    <div class="wrapper">
      <ul class="footer-left">
        <li><a href="../../terms.html">Terms of Use</a></li>
          <li><a href="http://atom.io/login">Sign in</a></li>
      </ul>

      <div class="footer-right">
        <a href="https://github.com"><span class="octicon octicon-code"></span> with <span class="octicon octicon-heart"></span> by <span class="octicon octicon-logo-github"></span></a>
      </div>
    </div>
  </div>
</footer>

</body>
</html>
